import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtSearchBar } from 'taro-ui'
import { connect } from '@tarojs/redux'

import { getOrder } from '../../api/order'
import { ListLoading } from '../../components/loading'
import { setOrderInfo } from '../../actions/order'
import { showToast } from '../../utils'

import './index.less'

@connect(() => ({}), { setOrderInfo })
class Order extends Taro.Component {
  config = {
    navigationBarTitleText: '我的订单'
  }

  state = {
    orderList: [],
    params: {
      pageSize: 12,
      pageNum: 1,
      key: 1,
      value: ''
    },
    isDone: false,
    isFocus: false
  }

  getOrder = async () => {
    const res = await getOrder(this.state.params)

    this.setState(({ orderList }) => ({
      orderList: orderList.concat(res.itemList)
    }), () => {
      if (this.state.orderList.length === res.rowCount) {
        this.setState({
          isDone: true
        })
      }
    })
  }

  componentDidMount() {
    this.setState({
      params: {
        ...this.state.params,
        value: this.$router.params.value
      }
    }, () => {
      this.getOrder()
    })
  }

  onReachBottom(){
    if (this.state.isDone) return

    const { pageNum } = this.state.params

    this.setState({
      params: {
        ...this.state.params,
        pageNum: pageNum + 1
      }
    }, () => {
      this.getOrder()
    })
  }

  toInfo = info => {
    this.props.setOrderInfo(info)

    Taro.navigateTo({
      url: 'detail'
    })
  }

  toSearch = () => {
    if (!this.state.params.value) {
      showToast('请输入要搜索的内容！')

      return
    }

    if (this.$router.params.value) {
      this.setState({
        orderList: [],
        isDone: false,
        params: {
          ...this.state.params,
          pageNum: 1
        },
      }, () => {
        this.getOrder()
      })
    } else {
      Taro.navigateTo({
        url: 'index?value=' + this.state.params.value
      })
  
      this.setState({
        params: {
          ...this.state.params,
          value: ''
        }
      })
    }
  }

  handleChange = val => {
    this.setState({
      params: {
        ...this.state.params,
        value: val.trim()
      }
    })
  }

  render() {
    const { orderList, isDone, params, isFocus } = this.state

    return (
      <View className="page">
        <AtSearchBar
          placeholder="搜索学员姓名/手机号"
          value={ params.value }
          onChange={ this.handleChange }
          onActionClick={ this.toSearch }
          onFocus={ () => this.setState({ isFocus: true }) }
          onBlur={ () => this.setState({ isFocus: false }) }
          onConfirm={ this.toSearch }
        />
        {
          isFocus
          ? <View className="search-mask" />
          : null
        }
        <View className="order-list">
          {
            orderList.map(item => (
              <View className="item" key={ item.rowNum } onClick={ this.toInfo.bind(this, item) }>
                <View className="info">
                  <View className="name">
                    <Text>{ item.name }</Text>
                    <View className={ `tag ${ item.orderTypeId === 1 ? 'first' : 'renew' }` }>{ item.orderType }</View>
                  </View>
                  <View>{ item.mobile }</View>
                </View>
                <View className="type">
                  <View>有效期</View>
                  <View>{ item.validityData }</View>
                </View>
                <View className="type">
                  <View>下单方式</View>
                  <View>{ item.channel }</View>
                </View>
                <View className="type">
                  <View>下单时间</View>
                  <View>{ item.orderTime }</View>
                </View>
                <View className="money">
                  <View>￥{ item.price }</View>
                  <View>实付款 ￥{ item.payAmount }</View>
                </View>
              </View>
            ))
          }
        </View>
        <ListLoading isDone={ isDone } data={ orderList } />
      </View>
    )
  }
}

export default Order